<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Jqia Context Menu  - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
      <link rel="stylesheet" href="../css/jquery.jqia.contextMenu.css"/>

      <style>
         #area
         {
            height: 100px;
            padding: 10px;
            margin-bottom: 20px;
            background-color: #ADD8E6;
         }
      </style>
   </head>
   <body>
      <h1 class="header">Jqia Context Menu plugin demo</h1>

      <div id="area">
         Click here to show the custom menu.
      </div>

      <button id="init-destroy-button">Init</button>

      <ul id="context-menu" class="context-menu">
         <li><a href="http://manning.com/derosa">jQuery in Action, 3rd edition</a></li>
         <li><a href="http://jquery.com">jQuery.com</a></li>
         <li><a href="http://manning.com/">Manning.com</a></li>
      </ul>

      <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/jquery.jqia.contextMenu.js"></script>
      <script>
         $('#init-destroy-button').click(function() {
            var $this = $(this);
            if ($this.text() === 'Init') {
               $this.text('Destroy');
               $("#area").jqiaContextMenu({idMenu: "context-menu"});
            } else {
               $this.text('Init');
               $("#area").jqiaContextMenu("destroy");
            }

         }).click();
      </script>
   </body>
</html>